<template>
  <div class="box" v-if="arr" ref="bgC">
    <div class="head">
      <img
        src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/logo@3x.png"
        alt=""
      />
    </div>
    <!-- 头部 -->
    <div class="box1">
      <div class="topic" @click="back">喵喵电影 > {{ arr.movie.nm }}</div>
      <div class="box2">
        <!-- 图片盒子 -->
        <div class="tu">
          <img :src="arr.movie.img | guo(arr.movie.img)" />
          <div class="tu-box">
            <img
              src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/poster-play.png"
              alt=""
            />
          </div>
        </div>
        <!-- 名称内容盒子 -->
        <div class="box3">
          <!-- 题目 -->
          <div class="headline">
            {{ arr.movie.nm }}
          </div>
          <div class="introduce">{{ arr.movie.enm }}</div>
          <div class="box4">
            <span>
              {{ arr.movie.cat }}
            </span>
            <span>
              <img
                src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/movie-tag-2DIMAX.png"
                alt=""
              />
            </span>
          </div>
          <div class="box5">
            <div class="yanyuan">{{ arr.movie.star }}</div>
            <div>{{ arr.movie.pubDesc }} / {{ arr.movie.dur }}分</div>
          </div>
          <div class="box6">
            <!-- 按钮盒子 -->
            <div>
              <span>
                <img
                  src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/want-to-watch.png"
                  alt=""
                />
              </span>
              想看
            </div>
            <div>看过</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 评分盒子 -->
    <div class="kong">
      <div class="kong-box">
        <div class="kong-timu">
          <div class="kong-box-left">
            <img
              src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/logo-new.png"
              alt=""
            />
            <span>猫眼购票评分</span>
          </div>
          <div class="kong-box-right">
            <span>{{ arr.movie.wish }} 人想看</span>
            <span>{{ arr.movie.watched }} 人看过</span>
          </div>
        </div>
        <div class="kong-box-b">
          <div class="b-left">
            <div class="b-l-fen">{{arr.movie.sc}}</div>
            <div class="b-l-zi">{{arr.movie.snum}}</div>
          </div>
          <div class="b-min">
            <div class="tb-mid fl">
              <div class="bar">
                <div class="star">
                  <img
                    src="https://s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/white-star.png"
                    alt=""
                  />
                  <img
                    src="https://s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/white-star.png"
                    alt=""
                  />
                  <img
                    src="https://s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/white-star.png"
                    alt=""
                  />
                  <img
                    src="https://s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/white-star.png"
                    alt=""
                  />
                  <img
                    src="https://s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/white-star.png"
                    alt=""
                  />
                </div>
                <div class="precent">
                  <div class="inner-pre"></div>
                </div>
              </div>
              <div class="bar">
                <div class="star">
                  <img
                    src="https://s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/white-star.png"
                    alt=""
                  />
                  <img
                    src="https://s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/white-star.png"
                    alt=""
                  />
                  <img
                    src="https://s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/white-star.png"
                    alt=""
                  />
                  <img
                    src="https://s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/white-star.png"
                    alt=""
                  />
                </div>
                <div class="precent">
                  <div class="inner-pre"></div>
                </div>
              </div>
              <div class="bar">
                <div class="star">
                  <img
                    src="https://s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/white-star.png"
                    alt=""
                  />
                  <img
                    src="https://s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/white-star.png"
                    alt=""
                  />
                  <img
                    src="https://s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/white-star.png"
                    alt=""
                  />
                </div>
                <div class="precent">
                  <div class="inner-pre"></div>
                </div>
              </div>
              <div class="bar">
                <div class="star">
                  <img
                    src="https://s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/white-star.png"
                    alt=""
                  />
                  <img
                    src="https://s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/white-star.png"
                    alt=""
                  />
                </div>
                <div class="precent">
                  <div class="inner-pre"></div>
                </div>
              </div>
              <div class="bar">
                <div class="star">
                  <img
                    src="https://s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/white-star.png"
                    alt=""
                  />
                </div>
                <div class="precent">
                  <div class="inner-pre"></div>
                </div>
              </div>
            </div>
          </div>
          <div class="b-right">
              <div>
                  <div class="b-r-top">
                      <p>TOP</p>
                      <p>1</p>
                  </div>
                  <div class="b-r-zi">
                      <p>2022年2月</p>
                      <p>大陆票房榜</p>
                  </div>
              </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 介绍盒子 -->
    <div class="introduce">
      <div>
        <div class="introduce-head">
          <div>简介</div>
          <div class="arrows" v-show="!it" @click="add">展开</div>
          <div class="arrows-xia" v-show="it" @click="add">收起</div>
        </div>
        <div class="introduce-bottom">
          <p :class="[it === true ? 'p1' : 'cut']">{{ arr.movie.dra }}</p>
        </div>
      </div>
    </div>
    <!-- 演员盒子 -->
    <hua-dong :brr="crr"></hua-dong>
    <!-- 视频盒子 -->
    <my-video :brr="drr"></my-video>
    <!-- 剧照盒子 -->
    <div class="actor">
      <div class="actor-box">
        <div>剧照</div>
        <div>全部139张</div>
      </div>
      <ul>
        <li v-for="(item, index) in brr" :key="index">
          <img :src="item" alt="" :onerror="errorimg" />
        </li>
      </ul>
    </div>
    <!-- 评论盒子 -->
    <pun-lun :err="frr">短评论</pun-lun>
    <cc-video :pm="grr"></cc-video>
    <!-- 短评 -->
    <pun-lun :err="err">长评论</pun-lun>
    <div class="myboxEnd">
        <div>
          <span>影视行业信息I 违法和不良信息举报电话：400601890</span>
          <img src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/bottom-logo.png" alt="">
        </div>
    </div>
  </div>
</template>
<script>
import huaDong from "../xiangQing/zuJian/huanDon.vue";
import myVideo from"../xiangQing/zuJian/myVideo.vue";
import punLun from"../xiangQing/zuJian//pinLun.vue";
import ccVideo from'../xiangQing/zuJian/CCvideo.vue';
export default {
  name: "xiangQing",
  components: {
    huaDong,
    myVideo,
    punLun,
    ccVideo
  },
  data() {
    return {
      errorimg: 'this.src="' + require("../assets/images/dita.gif") + '"', //备用图片
      it: false,
      id: null, //传过来的id
      arr: null, //主要数据
      brr: null, //剧照
      crr:null,//演员
      drr:null,//视频
      err:null,//短评论数据
      frr:null,//长评数据
      grr:null//相关推荐
    };
  },
  methods: {
    a() {
      this.$nextTick(() => {
        console.log(this.$refs);
        console.log(this.$refs);
      });
    },
    add() {
      this.it = !this.it;
    },
    async qingQiu() {
      let re = await this.axios.get(
        "https://apis.netstart.cn/maoyan/movie/detail?movieid=" +
          this.$route.params.id
      );
      // console.log(re.data);
      this.arr = re.data;
      // console.log(this.arr);
      console.log(this.arr.movie.backgroundColor);
      // console.log(this.arr.movie.photos);
      this.brr = this.arr.movie.photos;
      console.log(this.arr.relatedMovies);
      this.crr = this.arr.celebrities
      this.drr = this.arr.feedVideos.feeds
      this.err = this.arr.comments.hotComments
      this.frr = this.arr.comments.comments
      this.grr = this.arr.relatedMovies

      this.$nextTick(() => {
        console.log(this.$refs);
        //   console.log(this.$refs.bgC.$el.style.backgroundColor =this.arr.movie.backgroundColor );
        this.$refs.bgC.style.backgroundColor = this.arr.movie.backgroundColor;
      });
    },
    back() {
      this.$router.back();
    },
  },
  filters: {
    guo(a) {
      let img = a.replace("w.h", "100.138");
      return img;
    },
  },
  created() {
    //    this.id == this.$route.params.id
    this.qingQiu();
  },
  mounted() {
    // this.a()
  },
};
</script>

<style lang="less" scoped>
// @import'../assets/css/reset';
.fl {
  float: left;
}
.box {
  .myboxEnd{
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    background-color: white;
    text-align: center;
    span{
      font-size: 15px;
    }
    img{
      width: 78px;
      height: 22px;
    }
  }
  //  background-color: #402629;
  // font-size: 10px;
  width: 100%;
  box-sizing: border-box;
  .head {
    width: 100%;
    padding: 10px 10px;
    box-sizing: border-box;
    background-color: white;
    img {
      width: 94px;
      height: 39px;
    }
  }
  .box1 {
    width: 100%;
    // background-color: #402629;
    padding: 10px;
    box-sizing: border-box;
    color: white;
    .topic {
      padding: 10px 0;
      font-size: 10px;
      color: #cccccc;
    }
    .box2 {
      .jianTou {
        position: absolute;
        top: 0;
        left: 0;
        img {
          width: 10px;
          height: 10px;
        }
      }
      .tu {
        position: relative;
        .tu-box {
          position: absolute;
          left: 0;
          bottom: 0px;
          img {
            width: 35px;
            height: 35px;
          }
        }

        img {
          position: relative;
          width: 100px;
          height: 150px;
        }
      }
      padding: 10px 0;
      display: flex;
      .box3 {
        overflow: hidden;
        width: 100%;
        box-sizing: border-box;
        font-size: 10px;
        // padding-left: 10px;
        margin-left: 20px;
        .headline {
          white-space:nowrap;
          overflow:hidden;
          text-overflow:ellipsis;
          font-weight: 900;
          font-size: 20px !important;
          padding: 0 0 15px 0;
        }
        .introduce {
          color: #ada1a3;
          font-size: 9px;
           white-space:nowrap;
          overflow:hidden;
          text-overflow:ellipsis;
        }
        .box4 {
          padding: 5px 0;
          color: #ada1a3;
          span {
            font-size: 9px;
            img {
              margin-left: 5px;
              vertical-align: middle;
              width: 40px;
              height: 14px;
            }
          }
        }
        .box5 {
          color: #ada1a3;
          .yanyuan {
            padding: 0px 0 5px 0;
          }
        }
        .box6 {
          display: flex;
          justify-content: space-around;
          padding-top: 5px;
          > div {
            width: 50%;
            height: 30px;
            background-color: #837274;
            text-align: center;
            line-height: 30px;
            border-radius: 5px;
            // padding: 0 10px;
            margin: 0 5px;
            box-sizing: border-box;
            &:nth-child(1) {
              padding-left: 0;
              margin-left: 0;
            }
            &:nth-child(2) {
              padding-left: 0;
              margin-left: 0;
            }
            > span {
              > img {
                width: 14px;
                height: 14px;
                vertical-align: text-top;
              }
            }
          }
        }
      }
    }
  }
  .kong {
    width: 100%;
    padding: 10px 20px;
    box-sizing: border-box;
    .kong-box {
      font-size: 10px;
      color: white;
      width: 100%;
      background-color: rgba(0, 0, 0, 0.18);
      box-sizing: border-box;
      padding: 0 8px;
      .kong-timu {
        // padding: 0 10px;
        display: flex;
        justify-content: space-between;
        .kong-box-left {
          span {
            font-size: 15px;
            color: white;
            margin-left: 5px;
          }
          img {
            width: 16px;
            height: 16px;
            vertical-align: middle;
          }
        }
        .kong-box-right {
          overflow: hidden;
          span {
            box-sizing: border-box;
          overflow: hidden;
            font-size: 10px;
            color: #9A8F91;
            margin-left: 10px;
          }
        }
      }
      .kong-box-b {
          box-sizing: border-box;
          width: 100%;
        display: flex;
        > div {
        //   flex: 1;
        }
        .b-left {
          padding: 10px;
          text-align: right;
          .b-l-fen {
            color: #ffb400;
            font-size: 25px;
            font-weight: 700;
          }
          .b-l-zi {
            font-size: 10px;
            color: #7a6c6e;
            margin-left: 5px;
          }
        }
        .b-min{
             .tb-mid {
        width: 130px;
        height: 65px;
        margin-left: 15px;
        margin-top: 13px;
        .bar {
          width: 100%;
          height: 5px;
          display: flex;
          margin-top: 2px;

          .star {
            width: 35px;
            height: 5px;
            // float: left;
            display: flex;
            justify-content: flex-end;
            img {
              width: 5px;
              height: 5px;
              margin-right: 5px;
            }
          }
          .precent {
            width: 70px;
            height: 5px;
            background-color: hsla(0, 0%, 100%, 0.03);
            border-radius: 5px;
            margin-left: 2px;
            .inner-pre {
              width: 90%;
              height: 5px;
              background-color: hsla(0, 0%, 100%, 0.06);
              border-radius: 5px;
              // margin-left: 50px;
            }
          }
        }
      }
        }
        .b-right{
            overflow: hidden;
            box-sizing: border-box;
            width: 100%;
            >div{
                border: 1px solid #b49c70;
                box-sizing: border-box;
                font-size: 10px;
                display: flex;
                width: 100%;
                height: 50px;
                margin: 10px 0;
                padding-right: 4px;
                border-radius: 5px;
                .b-r-top{
                    margin: 2px;
                    padding: 6px;
                    width: 30px;
                    height: 60%;
                    background: url(//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/top1-reputation.png) no-repeat 50% center;
                    border-radius: 5px;
                    >p{ 
                        text-align: center;
                        color: rgba(255,229,150,.7);
                        text-shadow: 0 1px 4px #8e5d25;
                        letter-spacing: 0;
                        transform: scale(.9);
                        &:nth-child(2){
                        transform: scale(1.2);
                        font-weight: 400;

                        }
                         &:nth-child(1){
                        transform: scale(.9);

                        }
                    }
                    
                }
                .b-r-zi{
                    box-sizing: border-box;
                    width: 100%;
                    overflow: hidden;
                    >p{
                        font-size: 10px;
                        &:nth-child(1){
                            margin-top: 8px;
                            font-weight: 400;
                            color: #ffeec1;
                            -webkit-transform: scale(.8);
                            transform-origin: 0;
                            // 透明度
                            opacity:.7;

                        }
                        &:nth-child(2){
                            color: #fff4bd;
                            text-shadow: 0 1px 3px rgba(166,97,48,.5);
                            font-size: 10px;
                            font-weight: 900;
                            white-space: nowrap
                        }
                    }
                    

                }
            }
        }
      }
    }
  }
  .introduce {
    font-size: 15px;
    width: 100%;
    // padding: 10px;
    box-sizing: border-box;
    color: #cccccc;
    .introduce-head {
      padding: 10px;
      padding-bottom: 0;
      display: flex;
      justify-content: space-between;
      .arrows {
        &::after {
          content: "";
          display: inline-block;
          // line-height: 30px;
          height: 16px;
          width: 16px;
          background: url("../assets/images/向下箭头.png") no-repeat 100% center;
          color: red;
          vertical-align: text-top;
          padding-left: 5px;
        }
      }
      .arrows-xia {
        &::after {
          content: "";
          display: inline-block;
          // line-height: 30px;
          height: 16px;
          width: 16px;
          background: url("../assets/images/向上箭头.png") no-repeat 100% center;
          color: red;
          vertical-align: text-top;
          padding-left: 5px;
        }
      }
    }
    .introduce-bottom {
      .cut {
        box-sizing: border-box;
        padding: 10px;
        padding-bottom: 0;
        width: 100%;
        line-height: 25px;
        word-wrap: break-word;
        word-break: break-all;
        height: 83px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        text-overflow: ellipsis;
        overflow: hidden;
        transition: height 1s;
      }
      .p1 {
        box-sizing: border-box;
        padding: 10px;
        height: 100%;
        line-height: 25px;
        transition: height 1s;
        overflow: hidden;
        padding-bottom: 0;
      }
    }
  }
  .actor {
    .actor-box {
      display: flex;
      justify-content: space-between;
      font-size: 10px;
      color: #cccccc;
      padding: 10px 0 0 0;

      > div {
        &:nth-child(1) {
          color: white;
          font-size: 15px;
        }
      }
    }
    box-sizing: border-box;
    width: 100%;
    padding: 15px 15px 0 15px; 
    ul {
      display: flex;
      overflow-x: auto;
      white-space: nowrap;
      // overflow: hidden;
      &::-webkit-scrollbar {
        display: none;
      }
      li {
        margin: 10px;
        margin-right: 0px;

        img {
          width: 140px;
          height: 93px;
        }
      }
    }
  }
}
</style>